<template>
	<view class="content">
		<!-- 积分数以及积分提现 -->
		<view class="f1">
			<view class="icon">
				<u-icon name="rmb-circle-fill" color="#FFC303" size="44"></u-icon>
			</view>
			<view class="text">
				我的余额
			</view>
			<view class="money">
				¥：{{user.balance}}
			</view>



		</view>

		<!-- 分段器 积分明细 积分收入 积分支出 -->
		<view class="f2">
			<view class="top-up">
				<button>充值</button>
			</view>
			<view class="withdraw">
				<button>提现</button>

			</view>
		</view>
	</view>
</template>

<script>
	import {} from '../../common/api/integral.js';
	export default {
		data() {
			return {
				title: '我的积分',
				items: ['点击提现', '点击充值', ],
				current: null,
				pointDetails: [], // 存储积分明细数据
				pointIncome: [], // 存储积分收入数据
				pointExpense: [], // 存储积分支出数据
				user: {},
			}
		},
		mounted() {
			this.user = uni.getStorageSync('user');
		},
		methods: {
			onClickItem(e) {
				this.current = e.currentIndex;
				if (this.current === 0) {
					uni.navigateTo({
						url: '../rewards/rewards'
					});
				} else if (this.current === 1) {
					uni.navigateTo({
						url: '../rewards2/rewards2'
					});
				}
			},
			goto(url) {
				if (!this.user) {
					uni.navigateTo({
						url: '../login/login'
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	.text {
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.f1 {
		width: 100%;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 80rpx;
		color: #000;

		.tixian {
			width: 145rpx;
			margin-top: 20rpx;
			font-size: $uni-font-size-base;
			color: #f8f8f8;
			border-radius: 40rpx;
			border: 1px solid #f8f8f8;
			padding: 10rpx;
		}
	}

	.f2 {
		width: 100%;
		height: 100rpx;
		margin-top: 200rpx;


		//background-color: gainsboro;
	}

	.top-up {
		margin: 0 auto;
		width: 300rpx;

		button {
			background-color: #05C160;
		}
	}

	.withdraw {
		margin: 0 auto;
		margin-top: 30rpx;
		width: 300rpx;
	}
</style>